<template>
	<div :class="ComTab.type">
		<div class="tab">
			<div class="li " v-for="item in ComTab.list" :class="{active:ComTab.isactive===item.router}" @click="todatafather(item)">{{item.label}}
				<div class="after"></div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "ComTab",
		props: ['ComTab'],
		data() {
			return {

			}
		},
		methods: {
			todatafather(res) {
				this.ComTab.isactive = res.router;
				this.$emit("comtabson", this.ComTab)
			}
		},
	}
</script>

<style lang="less">
	.SOtab {
		width: 100%;
		padding: 15px 0;
		box-sizing: border-box;

		&.pointerevents {
			pointer-events: none;
		}

		.tab {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			border-bottom: 3px solid #ff9900;
			border-radius: 0 0 0 8px;

			.li {
				width: 143px;
				line-height: 30px;
				height: 30px;
				background: #41c7db;
				color: #000;
				font-size: 14px;
				text-align: center;
				position: relative;
				border: 1px solid #ff9900;
				border-radius: 8px;
				box-sizing: border-box;

				&.active {
					background: #ff9900;
				}


			}
		}
	}
	
	.Tabletab {
		.tab {
			height: 30px;
			line-height: 30px;
			display: flex;
			justify-content: flex-start;
			.li {
				width: 85px;
				border: 1px solid #ff6600;
				border-right: none;
				font-size: 14px;
				box-sizing: border-box;
				text-align: center;
				cursor: pointer;
				&:last-child {
					border-right: 1px solid #ff6600;
				}
				&.active {
					background: #41c7db;
					color: #fff;
				}
			}
		}
	}
	.bordertab{
		border-bottom: 2px solid #ff9900;
					border-radius:0 0 0 8px;
			.tab {
				height: 35px;
				line-height: 35px;
				display: flex;
				justify-content: flex-start;
				.li {
					width: 115px;
					border: 1px solid #ff9900;
					font-size: 14px;
					box-sizing: border-box;
					text-align: center;
					cursor: pointer;
					border-radius: 8px;
					
					&.active {
						background: #ff9900;
					}
				}
			}
	}
</style>
